<template>
  <view class="rewards-page">
    <view class="header">
      <text class="title">奖励中心</text>
      <button class="close-btn" @click="navigateBack">
        <text class="icon">×</text>
      </button>
    </view>
    
    <view class="score-info">
      <text class="label">当前积分</text>
      <view class="score">
        <text class="value">{{ gameStore.totalScore }}</text>
        <text class="icon">⭐</text>
      </view>
    </view>
    
    <view class="rewards-list">
      <reward-item 
        v-for="reward in gameStore.REWARDS" 
        :key="reward.id"
        :reward="reward"
        @redeem="handleRedeem"
      ></reward-item>
    </view>
  </view>
</template>

<script setup>
import { onMounted } from 'vue'
import { useGameStore } from '@/store/game'
import RewardItem from '@/components/reward-item.vue'

const gameStore = useGameStore()

onMounted(() => {
  gameStore.initGameState()
})

const navigateBack = () => {
  uni.navigateBack()
}

const handleRedeem = (rewardId) => {
  const success = gameStore.redeemReward(rewardId)
  if (success) {
    const reward = gameStore.REWARDS.find(r => r.id === rewardId)
    uni.showToast({
      title: `成功兑换：${reward.name}`,
      icon: 'none',
      duration: 2000
    })
  }
}
</script>

<style scoped>
.rewards-page {
  background-color: #1a1a2e;
  min-height: 100vh;
  padding: 24rpx;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 32rpx;
}

.title {
  font-size: 36rpx;
  font-weight: bold;
  color: #fff;
}

.close-btn {
  background-color: transparent;
  color: #ccc;
  width: 60rpx;
  height: 60rpx;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32rpx;
}

.score-info {
  background-color: rgba(30, 30, 50, 0.5);
  padding: 24rpx;
  border-radius: 16rpx;
  margin-bottom: 32rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.label {
  font-size: 28rpx;
  color: #ccc;
}

.score {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.value {
  font-size: 36rpx;
  font-weight: bold;
  color: #FFD700;
}

.icon {
  color: #FFD700;
  font-size: 32rpx;
}

.rewards-list {
  max-height: calc(100vh - 300rpx);
  overflow-y: auto;
  padding-bottom: 24rpx;
}
</style>